
<template>
  <div id="wrapper">
    <nav class="top">
      <a >
        <router-link :to="{name: 'jiayemian/yemian'}">
          <img class="left" src="../../assets/img/img.../xingzhuang164.png" alt="">
        </router-link>
      </a>
      <span class="wenzi">全部订单</span>
    </nav>
    <!--全部订单-->
    <div class="order">
      <ul>
        <li><a href="">全部订单</a></li>
        <li><a href="">
          <router-link :to="{name: 'daizhifu'}">待支付</router-link>
        </a></li>
        <li><a href="">
          <router-link :to="{name: 'daifahuo'}">待发货</router-link>
        </a></li>
        <li><a class="order-dai"href="">
          <router-link :to="{name: 'daishouhuo'}">待收货</router-link>
        </a></li>
        <li><a href="">
          <router-link :to="{name: 'jiaoyiwc'}">交易完成</router-link>
        </a></li>
      </ul>
    </div>
    <hr>
    <div class="number">
      <ul>
        <li>订单编号: 1485269676465</li>
        <li class="number-dai">待收货</li>
      </ul>
    </div>
    <hr>
    <!--图片信息部分-->
    <div class="my">
      <div class="my-left">

        <img class="img2" src="../../assets/img/personal/shangpintu.png" alt="" >
      </div>

      <div class="my-right">
        <ul>
          <li class="content-top">会呼吸丝滑蜜粉</li>
          <li class="content-mid">规格: 蜜粉</li>
          <li class="content-bot">￥ 166.06   <span>x 1件</span></li>
        </ul>
      </div>
    </div>
    <hr>
    <!--应付-->
    <div class="pay">
      <span>应付: ￥166.06</span>
      <span>倒计时: 03:02:56</span>
      <span>
        <a href="">
          确认收货
        </a>
      </span>
    </div>
    <hr>

    <div class="number">
      <ul>
        <li>订单编号: 1485269676465</li>
        <li class="number-dai">待支付</li>
      </ul>
    </div>
    <hr>
    <!--图片信息部分-->
    <div class="my">
      <div class="my-left">
        <!--<img class="img1" src="../../assets/img/img.../tuoyuan1kaobei.png" alt=""-->
             <!--&gt;-->
        <!--<img  class="img3" src="../../assets/img/kefu/zhanghutixian/duihao.png" alt=""  >-->
        <img class="img2" src="../../assets/img/personal/shangpintu.png" alt="" >
      </div>

      <div class="my-right">
        <ul>
          <li class="content-top">会呼吸丝滑蜜粉</li>
          <li class="content-mid">规格: 蜜粉</li>
          <li class="content-bot">￥ 166.06   <span>x 1件</span></li>
        </ul>
      </div>
    </div>
    <hr>
    <!--应付-->
    <div class="pay">
      <span>应付: ￥166.06</span>
      <span>倒计时: 03:02:56</span>
      <span>
        <a href="">
          去付款
        </a>
      </span>
    </div>
    <hr>




    <hr>
    <div class="number">
      <ul>
        <li>订单编号: 1485269676465</li>
        <li class="number-dai">待发货</li>
      </ul>
    </div>
    <hr>
    <!--图片信息部分-->
    <div class="my">
      <div class="my-left">

        <img class="img2" src="../../assets/img/personal/shangpintu.png" alt="" >
      </div>

      <div class="my-right">
        <ul>
          <li class="content-top">会呼吸丝滑蜜粉</li>
          <li class="content-mid">规格: 蜜粉</li>
          <li class="content-bot">￥ 166.06   <span>x 1件</span></li>
        </ul>
      </div>
    </div>
    <hr>
    <!--应付-->
    <div class="pay">
      <span>共计1件商品 合计: ￥166.06(含运费: ￥1.00)</span>
      <div class="pay-pay">
      <span>
        <a href="">
          催单
        </a>
      </span>
        <span>
        <a href="">
          取消订单
        </a>
      </span>
      </div>
    </div>
    <hr>


  </div>

</template>
<script>
  export default {
    methods:{


    }
  }
</script>
<style scoped>
  #wrapper{
    width: 100%;
  }
  .top{
    position: relative;
    width: 100%;
    height: 3rem;
    background-color: #e53e42;
  }
  .wenzi{
    font-family: MicrosoftYaHei;
    font-size: 0.7rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 2.25rem;
    letter-spacing: 0.04rem;
    color: white;
    position: absolute;
    top: 1rem;
    left: 6rem;
  }
  img{
    width: 0.47rem;
  }
  .left {
    position: absolute;
    top: 1.5rem;
    left: 0.7rem;
  }
  /*编辑*/

  .bian{
    float: right;
    margin-top: 1.9rem;
    color: white;
    font-weight: 100;
    font-size:0.7rem;
  }
  /*<!--全部订单-->*/

  .order ul li {
    display: inline-block;
    font-size:0.6rem;
    font-weight: 200;
    margin-left: 0.34rem;

  }
  .order ul li a{
    color:  #333333;
  }

  .order-dai:hover{
    color: #e53e42;
  }
  /*订单编号*/
  .number ul li{
    display: inline-block;
    font-size:0.66rem;
    font-weight: 200;
    margin-left: 0.9rem;

  }
  .number-dai{
    color: #e53e42;
  }
  /*商品内容*/
  .my{
    overflow: hidden;
  }

  .my-left .img1{
    float: left;
    padding-left: 1rem;
    margin-top: 0.9rem;
    width: 0.9rem;
  }
  .my-left .img2{
    float: left;
    margin-left: 1rem;
    margin-top: 0.9rem;
    width: 1.5rem;
  }
  /*右面文字部分*/
  .my-right{
    margin-left: 7rem;
  }
  .content-top{
    font-size:0.7rem;

  }
  .content-mid{
    font-size:0.6rem;
  }
  .content-bot{
    font-size:0.6rem;
    color: #e53e42;

  }
  .content-bot span{
    font-size:0.7rem;
    color: #808080;
  }
  /*最下面应付*/

  .pay span{
    font-size: 0.6rem;
    color: #e53e42;
    margin-left: 1.3rem;
  }
  .pay span a {
    font-size:0.6rem;
    color: white;
    background: #e53e42;
    border-radius: 0.2rem;
  }
  /*最下面应付*/
  .pay{
    height: 3rem;
  }
  .pay-pay{
    margin-left: 6.2rem;

  }


  .router-link-active{
    color: #e83d41;
    border-bottom: 0.1rem solid #e83d41;
  }
</style>

